<template>
    <page class="personalMy" child>
        <div class="myHeader">
            <div class="headerUri">
                <div class="headerImg">
                    <img :src="!Object.keys(userInfo).length ? wxInfo.headImageUrl : userInfo.headImage.includes('http')? userInfo.headImage : showImg(userInfo.headImage)">
                </div>
                <span class="userName">{{!Object.keys(userInfo).length ?wxInfo.nickname:userInfo.nickname}}</span>
            </div>
        </div>

        <van-cell-group>
            <van-cell title-class="title" title="个人信息" center is-link to="/personal/information">
                <v-svg class="icon" slot="icon" name="info"/>
            </van-cell>
            <van-cell title-class="title" title="我的贷款" center is-link to="/loan">
                <v-svg class="icon" slot="icon" name="loan"/>
            </van-cell>
            <van-cell title-class="title" title="代理申请" center is-link to="/agent">
                <v-svg class="icon" slot="icon" name="daili"/>
            </van-cell>
            <van-cell title-class="title" title="联系客服" center is-link to="/customerService">
                <v-svg class="icon" slot="icon" name="server"/>
            </van-cell>
            <van-cell title-class="title" title="公司介绍" center :border="false" is-link to="/about">
                <v-svg class="icon" slot="icon" name="company"/>
            </van-cell>
        </van-cell-group>

        <van-dialog v-model="show" :show-confirm-button="false">
            <div class="dialog">
               <div class="dialog-title">
                   <span>提示</span>
               </div>
                <div class="dialog-body">
                    <span>确定拨打电话1818902930吗？</span>
                </div>
                <div class="dialog-footer">
                    <van-button @click="show=false">关闭</van-button>
                    <van-button type="primary">确认</van-button>
                </div>
            </div>
        </van-dialog>

<!--        <van-popup v-model="show" round position="top" :style="{ width: '80%',height: '30%',top: '30%',left: '10%' }" />-->
    </page>
</template>

<script>
    import titleCell from "../../components/titleCell";
    import vSvg from '@/components/svg.vue';
    import { mapGetters } from 'vuex'
    export default {
        name: "index",
        computed: {...mapGetters(['wxInfo','userInfo'])},
        data(){
            return{
                show: false
            }
        },
        components: {
            titleCell,
            vSvg
        },
        methods: {

            contactService(){
                this.$toast.success('联系客服');
                this.show = true;
            }
        }
    }
</script>

<style lang="less" scoped>
    .personalMy{
        flex: 1;
        background-color: @page-color;
        .myHeader{
            padding: 20px 0;
            background-color: #fff;
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            .headerUri{
                margin: 0 auto;
                display: flex;
                flex-direction: column;

                .headerImg{
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }

                .userName{
                    margin-top: 5px;
                    font-size: @large;
                    font-weight: 600;
                    text-align: center;
                }
            }
        }
        .title{
            span{
                font-size: @large;
            }
        }
        .icon{
            width: .3rem;
            height: .3rem;
            margin-right: .13rem;
        }
    }
</style>
